<template>
  <my-slot :title="title" :desc="desc">
    <b-row class="mx-0">
      <b-col lg="4" md="6" sm="12"
        v-for="(item, ind) of productList"
        :key="ind"
        class="wow fadeInDown"
        :data-wow-delay="(ind * 0.2) + 's'"
      >
        <!-- 卡片 -->
        <b-card class="overflow-hidden my-2">
          <b-row no-gutters>
            <b-col cols="4" class="px-2">
              <b-card-img :src="item.icon" class="rounded-circle"></b-card-img>
            </b-col>
            <b-col cols="8">
              <b-card-body class="p-2">
                <b-card-title class="text-truncate">{{item.title}}</b-card-title>
                <b-card-text class="card-body-text text-muted text-justify">{{item.desc}}</b-card-text>
              </b-card-body>
            </b-col>
          </b-row>
          <!-- 蒙版 -->
          <div class="mask">
            <b-button variant="outline-info"
              class="mx-auto d-block my-btn"
              @click="$router.push('/business/'+item.id)"
            >了解更多</b-button>
          </div>
        </b-card>
      </b-col>
    </b-row>
  </my-slot>
</template>

<script>
import MySlot from '@/components/slot/index'

export default {
  components: {
    MySlot
  },
  data() {
    return {
      title: '社团简介',
      desc: '阜阳师范信息工程学院计算机协会是在阜阳师范信息工程学院团委领导下，由阜阳师范学院信息工程学院在校计算机、网络工程、软件工程等爱好的学生组成的，为了适应当代社会的要求；以加强学生综合素质，激发学生计算机学习的兴趣，提高学生计算机水平，活跃信工校园文化，展现多姿多彩的艺术实践生活风貌为目的，让在校学生得以培养计算机、网络、预防才能的学习、交流、研究、自治性、学术性学生社团。',
      productList: [
        {id: 1, icon: require('~/static/img/product/product01.jpg'), title: '计算机二级office培训', desc: '对于新加入社团的成员，进行计算机二级office办公软件的基础培训，激发社团成员office办公软件的认识和更加熟练的操作办公软件'},
        {id: 2, icon: require('~/static/img/product/product01.jpg'), title: '计算机C语言培训', desc: '对于计算机专业和非计算机且对计算机基础编程知识感兴趣的同学开设计算机基础编程语言C语言的培训。'},
        {id: 3, icon: require('~/static/img/product/product01.jpg'), title: '2018年“第十一届全国大学生信息安全竞赛”作品赛', desc: '2008年起“全国大学生信息安全竞赛”开赛至今，我院鼓励学生参与且于今年组成一支队伍。本次作品赛共吸引来自全国104所高校的494支团队报名参赛，报名人数达到1794人，经过初赛选拔，最终来自全国71所院校的200支团队进入本次决赛，安徽赛区共四所高校进入了决赛，最后获得了全国三等奖'},
        {id: 4, icon: require('~/static/img/product/product01.jpg'), title: '第十届蓝桥杯全国软件和信息技术专业人才大赛个人赛', desc: ' 经过计算机C语言培训后，新生参加第十届蓝桥杯全国软件和信息技术专业人才大赛个人赛校内选拔赛并且共有两位大一新生通过了校内选拔赛参加了第十届蓝桥杯全国软件和信息技术专业人才大赛个人赛安徽赛区的比赛，这是在这个之前从未实现过的一次。/数据能够传输及共享，提高信息资源的利用率，保证分布异构系统之间互联互通，建立中心数据库，完成数据的抽取、集中、加载、展现，构造统一的数据处理和交换。数据共享交换平台帮助政府和企业打破部门间的数据孤岛，适应于大数据时代的数据交换场景。'},
        {id: 5, icon: require('~/static/img/product/product01.jpg'), title: '2019年安徽省机器人大赛', desc: '这个是我们在5月11、12（2019年）去安徽职业技术学院参加的安徽省机器人大赛的时候照的，参赛队员共八名，其中六名是计算机协会的'}
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
.card {
  position: relative;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    // justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
  }
}
.card:hover {
  box-shadow: 0 0 10px #ccc;
  .mask {
    display: flex !important;
  }
}
.card-body-text {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
